<template>
  <!-- 添加或修改互市企业信息备案对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
    @close="close"
    class="self-dialog"
  >
    <el-tabs v-if="dialogVisible" v-model="activeName">
      <el-tab-pane label="企业基本信息" name="first">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="128px"
          label-position="right"
          class="flex-form-3 basic-form"
          size="small"
        >
          <el-form-item label="主管海关" prop="mainPort">
            <el-select
              v-model.trim="form.mainPort"
              placeholder="请选择主管海关"
              filterable
              clearable
            >
              <el-option v-for="(item, index) in customsList" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="场所编码" prop="fieldCode">
            <el-select v-model.trim="form.fieldCode" placeholder="请选择场所" filterable clearable>
              <el-option
                v-for="dict in fieldOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="企业中文名称" prop="coNameCn">
            <el-input
              v-model.trim="form.coNameCn"
              placeholder="请输入企业中文名称"
            />
          </el-form-item>
          <el-form-item label="企业外文名称" prop="coNameEn">
            <el-input
              v-model.trim="form.coNameEn"
              placeholder="请输入企业外文名称"
            />
          </el-form-item>
          <el-form-item label="企业代码" prop="coCode">
            <el-input v-model.trim="form.coCode" :disabled="this.dialogType=='declModify'" placeholder="请输入企业代码"/>
          </el-form-item>
          <el-form-item label="企业注册地" prop="coRegAddr">
            <el-select
                v-model.trim="form.coRegAddr"
                placeholder="请选择企业注册地"
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_reg_place"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </el-form-item>
          <el-form-item label="企业经营类型" prop="coDealType">
            <el-select
              v-model.trim="form.coDealType"
              placeholder="请选择企业经营类型"
              filterable
              clearable
            >
              <el-option v-for="(item, index) in dict.type.co_deal_type" :key="index" :label="item.value+'-'+item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="企业经营资格" prop="coDealQua">
            <el-input
              v-model.trim="form.coDealQua"
              placeholder="请输入企业经营资格"
            />
          </el-form-item>
          <el-form-item label="企业负责人" prop="coRep">
            <el-input
              v-model.trim="form.coRep"
              placeholder="请输入企业负责人"
            />
          </el-form-item>
          <el-form-item label="负责人联系电话" prop="coRepPhone">
            <el-input
              v-model.trim="form.coRepPhone"
              placeholder="请输入负责人联系电话"
            />
          </el-form-item>
          <el-form-item label="企业备案类别" prop="coRecType">
            <el-select
              v-model.trim="form.coRecType"
              placeholder="请选择企业备案类别"
              filterable
              clearable
            >
              <el-option v-for="(item, index) in dict.type.co_rec_type" :key="index" :label="item.value+'-'+item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="批准/许可批文号" prop="apprNo">
            <el-input
              v-model.trim="form.apprNo"
              placeholder="请输入批准/许可批文号"
            />
          </el-form-item>
          <el-form-item label="批准机关" prop="apprDep">
            <el-input
              v-model.trim="form.apprDep"
              placeholder="请输入批准机关"
            />
          </el-form-item>
          <el-form-item label="批准/许可批文有效期" prop="apprValidTime">
            <el-date-picker
              clearable
              size="small"
              v-model.trim="form.apprValidTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择批准/许可批文有效期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="企业地址" prop="coAddr">
            <el-input v-model.trim="form.coAddr" placeholder="请输入企业地址"/>
          </el-form-item>
          <el-form-item label="境内联系地址" prop="insideAddr">
            <el-input
              v-model.trim="form.insideAddr"
              placeholder="请输入境内联系地址"
            />
          </el-form-item>
          <el-form-item label="境内联系电话" prop="insidePhone">
            <el-input
              v-model.trim="form.insidePhone"
              placeholder="请输入境内联系电话"
            />
          </el-form-item>
          <el-form-item label="运输工具服务企业名称" prop="coServiceName">
            <el-input
              v-model.trim="form.coServiceName"
              placeholder="请输入运输工具服务企业名称"
            />
          </el-form-item>
          <el-form-item label="运输工具服务企业地址" prop="coServiceAddr">
            <el-input
              v-model.trim="form.coServiceAddr"
              placeholder="请输入运输工具服务企业地址"
            />
          </el-form-item>
          <el-form-item label="运输工具服务企业联系电话" prop="coServicePhone">
            <el-input
              v-model.trim="form.coServicePhone"
              placeholder="请输入运输工具服务企业联系电话"
            />
          </el-form-item>
          <el-form-item label="批准货运车辆指标数" prop="apprGoodsVeCount">
            <el-input-number v-model.trim="form.apprGoodsVeCount" :min="0"
                             label="请输入批准货运车辆指标数"></el-input-number>
          </el-form-item>
          <el-form-item label="批准客运车辆指标数" prop="apprPassengersVeCount">
            <el-input-number v-model.trim="form.apprPassengersVeCount" :min="0"
                             label="请输入批准客运车辆指标数"></el-input-number>
          </el-form-item>
          <el-form-item label="担保方式" prop="assureType">
            <el-select
              v-model.trim="form.assureType"
              placeholder="请选择担保方式"
              filterable
              clearable
            >
              <el-option v-for="(item, index) in dict.type.sw_assure_type" :key="index"
                         :label="item.value+'-'+item.label" :value="item.value"/>
            </el-select>

          </el-form-item>
          <el-form-item label="担保函编号" prop="assureLetterNo">
            <el-input
              v-model.trim="form.assureLetterNo"
              placeholder="请输入担保函编号"
            />
          </el-form-item>
          <el-form-item label="担保函金额" prop="assureMoney">
            <el-input-number v-model.trim="form.assureMoney" :min="0" label="请输入担保函金额"></el-input-number>
          </el-form-item>
          <el-form-item label="担保期限" prop="assureTerm">
            <el-date-picker
              clearable
              size="small"
              v-model.trim="form.assureTerm"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择担保期限"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="担保企业组织机构代码" prop="assureCoOrgCode">
            <el-input
              v-model.trim="form.assureCoOrgCode"
              placeholder="请输入担保企业组织机构代码"
            />
          </el-form-item>
          <el-form-item label="担保企业名称" prop="assureCoName">
            <el-input
              v-model.trim="form.assureCoName"
              placeholder="请输入担保企业名称"
            />
          </el-form-item>
          <el-form-item label="担保企业法人代表" prop="assureCoRep">
            <el-input
              v-model.trim="form.assureCoRep"
              placeholder="请输入担保企业法人代表"
            />
          </el-form-item>
          <el-form-item label="担保企业电话" prop="assureCoPhone">
            <el-input
              v-model.trim="form.assureCoPhone"
              placeholder="请输入担保企业电话"
            />
          </el-form-item>
          <el-form-item label="担保企业地址" prop="assureCoAddr">
            <el-input
              v-model.trim="form.assureCoAddr"
              placeholder="请输入担保企业地址"
            />
          </el-form-item>
          <el-form-item label="担保企业联系人" prop="assureCoContact">
            <el-input
              v-model.trim="form.assureCoContact"
              placeholder="请输入担保企业联系人"
            />
          </el-form-item>
          <el-form-item label="担保企业联系人电话" prop="assureCoConPhone">
            <el-input
              v-model.trim="form.assureCoConPhone"
              placeholder="请输入担保企业联系人电话"
            />
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input type="textarea" v-model.trim="form.memo" placeholder="请输入备注"/>
          </el-form-item>
          <el-form-item label="批文扫描图">
            <fileUpload v-model="form.approNoPic" :fileType="fileType" :fileSize="1" :limit="1"/>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="批准行驶口岸列表" name="second">
        <allow-ie-port-list ref="allowPortList" :dialogType="dialogType" :allowPortListData="form.allowApprPorts" :customsList="customsList" @selectAllowPort="selectAllowPort"></allow-ie-port-list>
      </el-tab-pane>
      <el-tab-pane label="企业境外商号信息" name="third">
        <abroad-co-info ref="abroadCoInfo" @receiveAbroadCoInfos="receiveAbroadCoInfos" :dialogType="dialogType" :abroadCoInfosData="form.abroadCoInfos"></abroad-co-info>
      </el-tab-pane>
      <el-tab-pane label="企业内承单位信息" name="fourth">
        <assume-co-info ref="assumeCoInfo" @receiveAssumeCoInfos="receiveAssumeCoInfos" :dialogType="dialogType" :assumeCoInfosData="form.assumeCoInfos"></assume-co-info>
      </el-tab-pane>
      <el-tab-pane label="企业所属分支机构信息" name="fifth">
        <belong-part-org ref="belongPartOrg" @receivePartOrgs="receivePartOrgs" :dialogType="dialogType" :partOrgsData="form.partOrgs"></belong-part-org>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getCorporationInfo,
  addCorporationInfo,
  updateCorporationInfo, editDeclCorporationInfo,
} from "@/api/swdecl/corporationInfo";
import abroadCoInfo from './sublist/abroadCoInfo.vue';
import assumeCoInfo from './sublist/assumeCoInfo.vue';
import BelongPartOrg from './sublist/belongPartOrg.vue';
import AllowIePortList from '../../components/allowIePortList.vue';

export default {
  components: {abroadCoInfo, assumeCoInfo, BelongPartOrg, AllowIePortList},
  name: "CorporationInfo-addEdit",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {
      },
    },
    customsList: {
      type: Array,
      default: () => []
    },
    fieldOptions: {
      type: Array,
      default: () => []
    },
    dict: {},
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      activeName: "first",
      // 标题
      title: "新增",
      fileType: ['png', 'jpg', 'jpeg'],
      baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      // 表单参数
      form: {
        id: null,
        eportId: null,
        coCode: null,
        mainPort: null,
        coRegAddr: null,
        apprDep: null,
        apprNo: null,
        apprValidTime: null,
        allowApprPorts: [],
        coNameCn: null,
        coNameEn: null,
        coDealType: null,
        coDealQua: null,
        coAddr: null,
        coRep: null,
        coRepPhone: null,
        insideAddr: null,
        insidePhone: null,
        coServiceName: null,
        coServiceAddr: null,
        coServicePhone: null,
        apprGoodsVeCount: null,
        apprPassengersVeCount: null,
        assureType: null,
        assureLetterNo: null,
        assureMoney: null,
        assureTerm: null,
        assureCoOrgCode: null,
        assureCoName: null,
        assureCoRep: null,
        assureCoPhone: null,
        assureCoAddr: null,
        assureCoContact: null,
        assureCoConPhone: null,
        memo: null,
        currApplyBussine: null,
        proposer: null,
        proposeTime: null,
        coRecType: null,
        operationType: null,
        approNoPic: null,
        fieldCode: null,
        proposeStatus: "0",
        responseCode: null,
        responseText: null,
        responseType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        messageId: null,
        abroadCoInfos: [],  //企业境外商号信息
        assumeCoInfos: [],  //企业内承单位信息对象
        partOrgs: [],  //企业所属分支机构信息对象
      },
      // 互市企业信息备案表格数据
      corporationInfoList: [],
      // 表单校验
      rules: {
        coCode: [
          {required: true, message: "企业代码不能为空", trigger: "blur"},
        ],
        approNoPic: [
          {required: true, message: "批文扫描图不能为空", trigger: "blur"},
        ],
        mainPort: [
          {required: true, message: "主管海关不能为空", trigger: "change"},
        ],
        coRegAddr: [
          {required: true, message: "企业注册地不能为空", trigger: "blur"},
        ],
        coRecType: [
          {required: true, message: "企业备案类别不能为空", trigger: "blur"},
        ],
        apprNo: [
          {
            required: true,
            message: "批准/许可批文号不能为空",
            trigger: "blur",
          },
        ],
        coNameCn: [
          {required: true, message: "企业中文名称不能为空", trigger: "blur"},
        ],
        coDealType: [
          {
            required: true,
            message: "企业经营类型不能为空",
            trigger: "change",
          },
        ],
        coDealQua: [
          {required: true, message: "企业经营资格不能为空", trigger: "blur"},
        ],
        coRep: [
          {required: true, message: "企业负责人不能为空", trigger: "blur"},
        ],
        coRepPhone: [
          {
            required: true,
            message: "负责人联系电话不能为空",
            trigger: "blur",
          },
        ],
        assureType: [
          {required: true, message: "担保方式不能为空", trigger: "change"},
        ],
        fieldCode: [
          {required: true, message: "场所编码不能为空", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.activeName = "first";
      this.initForm();
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.loadDetail();
        } else if (this.dialogType == "declModify") {
          this.title = "变更申报";
          this.loadDetail();
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },
    initForm() {
      this.form = {
        id: null,
        eportId: null,
        coCode: null,
        mainPort: null,
        coRegAddr: null,
        apprDep: null,
        apprNo: null,
        apprValidTime: null,
        allowApprPorts: [],
        coNameCn: null,
        coNameEn: null,
        coDealType: null,
        coDealQua: null,
        coAddr: null,
        coRep: null,
        coRepPhone: null,
        insideAddr: null,
        insidePhone: null,
        coServiceName: null,
        coServiceAddr: null,
        coServicePhone: null,
        apprGoodsVeCount: null,
        apprPassengersVeCount: null,
        assureType: null,
        assureLetterNo: null,
        assureMoney: null,
        assureTerm: null,
        assureCoOrgCode: null,
        assureCoName: null,
        assureCoRep: null,
        assureCoPhone: null,
        assureCoAddr: null,
        assureCoContact: null,
        assureCoConPhone: null,
        memo: null,
        currApplyBussine: null,
        proposer: null,
        proposeTime: null,
        coRecType: null,
        operationType: null,
        approNoPic: null,
        fieldCode: null,
        proposeStatus: "0",
        responseCode: null,
        responseText: null,
        responseType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        messageId: null,
        abroadCoInfos: [],  //企业境外商号信息
        assumeCoInfos: [],  //企业内承单位信息对象
        partOrgs: [],  //企业所属分支机构信息对象
      }
    },
    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getCorporationInfo(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    receiveAbroadCoInfos(val) {
      this.form.abroadCoInfos = val;
    },
    receiveAssumeCoInfos(val) {
      this.form.assumeCoInfos = val;
    },
    receivePartOrgs(val) {
      this.form.partOrgs = val;
    },
    selectAllowPort(val) {
      let arr = val.map(item => {
        return {
          ...item,
          portCode: item.portCode.join(",")
        }
      })
      this.form.allowApprPorts = arr;
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(this.form.allowApprPorts.length === 0) {
            this.$message.error("请至少添加一个批准行驶口岸！")
            return false;
          }
          let params = {
            ...this.form,
          };
          if (this.dialogType == "add") {
            addCorporationInfo(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "edit") {
            updateCorporationInfo(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "declModify") {
            editDeclCorporationInfo(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("变更申报成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-form {
  ::v-deep .el-form-item__label {
    line-height: 16px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
